<%@ page import="static com.sun.org.apache.xalan.internal.xsltc.compiler.sym.error" %><%--
  Created by IntelliJ IDEA.
  User: 无论 而且
  Date: 2023/4/12
  Time: 18:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <style>
        :root {
            /* COLORS */
            --white: #e9e9e9;
            --gray: #333;
            --blue: #0367a6;
            --lightblue: #008997;

            /* RADII */
            --button-radius: 0.7rem;

            /* SIZES */
            --max-width: 100%;
            --max-height: 100%;

            font-size: 16px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
            Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        }

        body {
            align-items: center;
            background-color: var(--white);
            background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
            /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: grid;
            height: 100vh;
            place-items: center;
        }

        .form__title {
            font-weight: 300;
            margin: 0;
            margin-bottom: 1.25rem;
        }

        .link {
            color: var(--gray);
            font-size: 0.9rem;
            margin: 1.5rem 0;
            text-decoration: none;
        }

        .container {
            background-color: var(--white);
            border-radius: var(--button-radius);
            box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
            0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
            height: var(--max-height);
            max-width: var(--max-width);
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .container__form {
            height: 100%;
            position: absolute;
            top: 0;
            transition: all 0.6s ease-in-out;
        }

        .container--signin {
            left: 0;
            width: 50%;
            z-index: 2;
        }

        .container.right-panel-active .container--signin {
            transform: translateX(100%);
        }

        .container--signup {
            left: 0;
            opacity: 0;
            width: 50%;
            z-index: 1;
        }

        .container.right-panel-active .container--signup {
            animation: show 0.6s;
            opacity: 1;
            transform: translateX(100%);
            z-index: 5;
        }

        .container__overlay {
            height: 100%;
            left: 50%;
            overflow: hidden;
            position: absolute;
            top: 0;
            transition: transform 0.6s ease-in-out;
            width: 50%;
            z-index: 100;
        }

        .container.right-panel-active .container__overlay {
            transform: translateX(-100%);
        }

        .overlay {
            background: var(--lightblue) url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg") no-repeat fixed center;
            background-size: cover;
            height: 100%;
            left: -100%;
            position: relative;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
            width: 200%;
        }

        .container.right-panel-active .overlay {
            transform: translateX(50%);
        }

        .overlay__panel {
            align-items: center;
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            position: absolute;
            text-align: center;
            top: 0;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
            width: 50%;
        }

        .overlay--left {
            transform: translateX(-20%);
        }

        .container.right-panel-active .overlay--left {
            transform: translateX(0);
        }

        .overlay--right {
            right: 0;
            transform: translateX(0);
        }

        .container.right-panel-active .overlay--right {
            transform: translateX(20%);
        }

        .btn {
            background-color: var(--blue);
            background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
            border-radius: 20px;
            border: 1px solid var(--blue);
            color: var(--white);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1rem;
            padding: 0.9rem 4rem;
            text-transform: uppercase;
            transition: transform 80ms ease-in;
        }

        .form > .btn {
            margin-top: 1.5rem;
        }

        .btn:active {
            transform: scale(0.95);
        }

        .btn:focus {
            outline: none;
        }

        .form {
            background-color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 3rem;
            height: 100%;
            text-align: center;
        }

        .input {
            background-color: #fff;
            border: none;
            padding: 0.9rem 0.9rem;
            margin: 0.5rem 0;
            width: 100%;
        }

        @keyframes show {

            0%,
            49.99% {
                opacity: 0;
                z-index: 1;
            }

            50%,
            100% {
                opacity: 1;
                z-index: 5;
            }
        }

        span {
            color: red;
            font-size: 12px;
        }

        #box img {
            position: absolute;
            top: 210px;
            right: 190px;
            width: 24px;
        }

    </style>

</head>
<body>
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="${pageContext.request.contextPath }/login" class="form" id="form1" method="post">
            <h2 class="form__title">登录</h2>
            <div>
                <input type="text" placeholder="手机号" class="input" id="phone" name="phone"/>
                <span id="phoneMessage"></span>
            </div>
            <div id="box">
                <input type="password" placeholder="密码" class="input" id="password" name="password"/>
                <img src="../img/icon_1.png" id="eye">
                <span id="passwordMessage"></span>
            </div>
            <span id="errorMessage" >${error}</span>
            <a href="#" class="link">忘记密码？</a>
            <input type="submit" class="btn" id="logon" value="登录" onclick="return validateLoginForm();"></input>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="${pageContext.request.contextPath }/register" class="form" id="form2">
            <h2 class="form__title">注册</h2>
            <div><input type="text" placeholder="用户名" class="input" id="userName"/>
                <span id="userMessage"></span>
            </div>
            <div><input type="password" placeholder="密码" class="input" id="pwd1"/>
                <span id="pwd1Message"></span>
            </div>
            <div>
                <input type="password" placeholder="确认密码" class="input" id="pw2"/>
                <span id="pw2Message"></span>
            </div>
            <div><input type="" placeholder="手机号" class="input" id="phone1"/>
                <button class="getCode">发送短信</button>
                <span id="phone1Message"></span>
            </div>
            <div><input type="password" placeholder="验证码" class="input" id="yzm"/>
                <span id="yzmMessage"></span>
            </div>
            <button class="btn" id="login" onclick="zc()">注册</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">注册</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">登录</button>
            </div>
        </div>
    </div>
</div>
<script>
    setTimeout(function() {
        // $('#errorMessage').html('')
        document.getElementById("errorMessage").style.display = 'none';
    }, 3000);
</script>
<%--<script>--%>
<%--    function showErrorMessage(msg) {--%>
<%--        var noMessage = document.getElementById("noMessage");--%>
<%--        noMessage.innerHTML = msg;--%>
<%--        noMessage.style.display = "block";--%>
<%--    }--%>

<%--    function validateLoginForm() {--%>
<%--        const phone = document.getElementById("phone").value;--%>
<%--        const password = document.getElementById("password").value;--%>
<%--        const xhr = new XMLHttpRequest();--%>
<%--        xhr.open("POST", "/login", true);--%>
<%--        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");--%>
<%--        xhr.onreadystatechange = function () {--%>
<%--            if (this.readyState === 4 && this.status === 200) {--%>
<%--                const response = JSON.parse(this.responseText);--%>
<%--                if (response.isValid) {--%>
<%--                    alert("验证通过");--%>
<%--                } else {--%>
<%--                    alert("验证失败");--%>
<%--                }--%>
<%--            }--%>
<%--        }--%>
<%--        xhr.send(`phone=${phone}&password=${password}`);--%>
<%--        var errorMsg = "用户名或密码不正确。";--%>
<%--        showErrorMessage(errorMsg);--%>
<%--        return false;--%>
<%--    }--%>
<%--</script>--%>
<script>
    // 1.获取元素
    var input = document.getElementById('password');
    var eye = document.getElementById('eye');
    var flag = 0;
    // 2.注册事件 处理程序
    eye.onclick = function () {
        // 应用flag 可以实现循环点击
        if (flag === 0) {
            // 点击一次后 flag 一定要变化
            input.type = 'password';
            // 修改 -图片路径
            eye.src = "../img/icon_1.png";
            flag = 1;//赋值操作
        } else {
            input.type = 'text';
            // 修改 -图片路径
            eye.src = "../img/icon_2.png";
            flag = 0;
        }

    }
</script>
<script>
    function zc() {
        var userMessage = document.getElementById("userMessage");
        var userName = document.getElementById("userName");
        userName.onblur = function () {
            userName.onblur = function () {
                var username = userName.value.trim();
                if (username.length == 0) {
                    userMessage.innerText = "请输入用户名!";
                } else {
                    var userRegExp = /^[A-Za-z0-9]+$/;
                    var isOk = userRegExp.test(username);
                    if (!isOk) {
                        userMessage.innerText = "用户名输入不合法!";
                    }
                    back(userName, userMessage);
                }
            }
        }

        var pw1Message = document.getElementById("pwdMessage");
        var pw1 = document.getElementById("pw1");
        pw1.onblur = function () {
            //获取密码并去除左右空白
            var password = pw1.value.trim();
            //密码不能为空
            if (password.length == 0) {
                pw1Message.innerText = "请输入密码!";
            } else if (password.length < 6 || password.length > 20) {
                pw1Message.innerText = "密码长度必须为6-20!";
            }
            //光标回到文本框时清楚提示信息及不合法的密码
            back(pw1, pw1Message);
        }
        var pw2Message = document.getElementById("pw2Message");
        var pw2 = document.getElementById("pw2");
        pw2.onblur = function () {
            var pwd1 = document.getElementById("pw1");
            var password1 = pwd1.value.trim();
            var password2 = pw2Message.value.trim();

            //密码不能为空
            if (password2.length == 0) {
                pw2Message.innerText = "请确认密码！"
            } else if (password1 != password2) {
                pw2Message.innerText = "两次密码输入不一致，请重新输入！"
            }
            //光标回到文本框时清楚提示信息及不合法的密码
            back(pw2, pw2Message);
        }

        var phone1Message = document.getElementById("phone1Message");
        var phone1 = document.getElementById("phone1");
        phone1.onblur = function () {
            //获取密码并去除左右空白
            var p = phone1.value.trim();
            //密码不能为空
            if (p.length == 0) {
                phone1Message.innerText = "请输入电话!";
            } else if (p.length < 6 || p.length > 20) {
                phone1Message.innerText = "请输入正确的号码";
            }
            //光标回到文本框时清楚提示信息及不合法的密码
            back(phone1, phone1Message);
        }
        var back = function (textElt, messageElt) {
            textElt.onfocus = function () {
                //判断文本框value是否合法
                if (messageElt.innerHTML != "") {
                    this.value = "";
                }
                //清空提示信息
                messageElt.innerHTML = "";
            }
        }
        var zc = document.getElementById("login")
        zc.onclick = function () {
            userName.focus();
            userName.blur();
            //触发密码文本框的blur事件
            pw1.focus();
            pw2.blur();
            //触发确认密码文本框的blur事件
            pw2.focus();
            pw2.blur();
            phone1.focus();
            phone1.blur()
            if (userMessage.innerText.length == 0 && pw1Message.innerText.length == 0 && pw2Message.innerText.length == 0 && phone1Message.innerText.length == 0) {
                //获取表单对象
                var formElt = document.getElementById("form2");
                //提交表单
                formElt.submit();
            }


        }
    }
</script>
<script>
    window.onload = function () {

        var phone = document.getElementById("phone")
        var phoneMessage = document.getElementById("phoneMessage")
        phone.onblur = function () {
            var phones = phone.value.trim();
            let reg = /^1([0-9])\d{9}$/;
            if (phones.length == 0) {
                phoneMessage.innerText = "请输入手机号码!";
            } else if (reg.test(phones)) {
                phoneMessage.innerText = "请输入正确的手机号码!";
            }
            back(phone, phoneMessage);
        }
        var password = document.getElementById("password")
        var passwordMessage = document.getElementById("passwordMessage")
        password.onblur = function () {
            var passwords = password.value.trim();
            if (passwords.length == 0) {
                passwordMessage.innerText = "请输入密码!";
            }
            back(phone, phoneMessage);
        }


        var back = function (textElt, messageElt) {
            textElt.onfocus = function () {
                //判断文本框value是否合法
                if (messageElt.innerHTML != "") {
                    this.value = "";
                }
                //清空提示信息
                messageElt.innerHTML = "";
            }

        }
        var logon = document.getElementById("logon")
        logon.onclick = function () {
            phone.focus();
            phone.blur();
            password.focus();
            password.blur();
            if (phoneMessage.innerText.length == 0 && passwordMessage.innerText.length == 0) {
                //获取表单对象
                var L = document.getElementById("form1");
                //提交表单
                L.submit();
            }

        }
    }
</script>
<script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());

</script>

</body>
</html>
